<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyunlong
 * @LastEditTime: 2022-01-08 09:37:26
-->
<template>
  <div ref="right_container" style="height: 95%"></div>
</template>
<script>
import { DualAxes } from "@antv/g2plot";
export default {
  data() {
    return {
      dataArr: [
        { time: "2019-03", value: 350, count: 800 },
        { time: "2019-04", value: 900, count: 600 },
        { time: "2019-05", value: 300, count: 400 },
        { time: "2019-06", value: 450, count: 380 },
        { time: "2019-07", value: 470, count: 220 },
      ],
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const dualAxes = new DualAxes(this.$refs.right_container, {
        data: [this.dataArr,this.dataArr],
        xField: "time",
        yField: ["value", "count"],
      });
      dualAxes.render();
    },
  },
};
</script>
<style scoped>
</style>